<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加客服</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC__/admin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__STATIC__/admin/style/admin.css" media="all">
    <style>
        .avatar-img li{width: 60px;height: 60px;float:left;cursor: pointer;text-align: center}
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" action="" lay-filter="component-form-element">
                        <div class="layui-row layui-col-space10 layui-form-item">
                            <div class="layui-col-lg6">
                                <label class="layui-form-label">客服名称：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="kefu_name" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-lg6">
                                <label class="layui-form-label">客服密码：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="kefu_password" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属分组：</label>
                            <div class="layui-input-block">
                                <select name="group_id" lay-verify="required">
                                    <option value="">选择一个分组</option>
                                    {foreach name="group" item="vo"}
                                    <option value="{$vo['group_id']}">{$vo['group_name']}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否激活：</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="kefu_status" lay-skin="switch" lay-text="是|否" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">最大服务人数：</label>
                            <div class="layui-input-block">
                                <input type="number" name="max_service_num" lay-verify="required" placeholder="" autocomplete="off" class="layui-input" value="10">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <input type="hidden" name="kefu_avatar" value="__STATIC__/common/images/kefu/1.png" id="kefu_avatar"/>
                            <label class="layui-form-label">客服头像：</label>
                            <div class="layui-input-inline">
                                <img src="__STATIC__/common/images/kefu/1.png" width="50px" height="50px" id="avatar">
                                <a href="javascript:;" style="margin-left: 20px;color:#01AAED" onclick="changeAvatar()">选择</a>
                                <a href="javascript:;" style="margin-left: 20px;color:#01AAED" id="upload_avatar">上传</a>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="component-form-element">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="avatar-box" style="width: 200px;height: 200px;display: none;">
    <ul class="avatar-img" style="margin-top: 50px;margin-left: 10px">
        <li data-id="1"><img src="__STATIC__/common/images/kefu/1.png" width="50px" height="50px"/></li>
        <li data-id="2"><img src="__STATIC__/common/images/kefu/2.png" width="50px" height="50px"/></li>
        <li data-id="3"><img src="__STATIC__/common/images/kefu/3.png" width="50px" height="50px"/></li>
        <li data-id="4"><img src="__STATIC__/common/images/kefu/4.png" width="50px" height="50px"/></li>
        <li data-id="5"><img src="__STATIC__/common/images/kefu/5.png" width="50px" height="50px"/></li>
        <li data-id="6"><img src="__STATIC__/common/images/kefu/6.png" width="50px" height="50px"/></li>
    </ul>
</div>
<script src="__STATIC__/admin/layui/layui.js"></script>
<script src="__STATIC__/common/js/jquery.min.js"></script>
<script>
    layui.config({
        base: '__STATIC__/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form','upload'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,form = layui.form
            ,upload = layui.upload;
            
        //执行实例
	    var uploadInst = upload.render({
	        elem: '#upload_avatar' //绑定元素
	        ,url: '/index/upload/uploadImg' //上传接口
	        ,done: function(res){
	            if(res.code === 0){
	                $('#kefu_avatar').val(res.data.src);
	                $('#avatar').attr('src',res.data.src);
	            }
	        }
	        ,error: function(){
	            layer.msg('上传失败',{icon:2,time:1500})
	        }
	    });    

        form.on('submit(component-form-element)', function(data){

            $.post("{:url('ke_fu/addKefu')}", data.field, function (res) {

                if(0 == res.code) {

                    layer.msg(res.msg);
                    setTimeout(function () {

                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        window.parent.renderTable();
                    }, 200);
                } else {

                    layer.alert(res.msg, {
                        'title': '添加错误',
                        'icon': 2
                    });
                }
            }, 'json');
            return false;
        });
    });

    function changeAvatar() {
        layui.use('layer', function () {
            var layer = layui.layer;

            var index = layer.open({
                title: '',
                type: 1,
                area: ['200px', '200px'],
                content: $("#avatar-box").html()
            });

            $(".avatar-img li").click(function () {

                var id = $(this).attr('data-id');
                $("#avatar").attr('src', '__STATIC__/common/images/kefu/' + id + '.png');
                $("#kefu_avatar").val('__STATIC__/common/images/kefu/' + id + '.png');

                layer.close(index);
            });
        });
    }
</script>
</body>
</html>